<script setup>
import {computed, ref, watchEffect} from 'vue';
import {ElInput,ElSpace,ElRow,ElCol,ElIcon,ElButton,ElTabPane,ElTabs,ElInputTag} from "element-plus";
import {Search} from "@element-plus/icons-vue";
import mediaStore from "../../store/MediaStore.js";
import Image from "../../components/media/image.vue";
import Video from "../../components/media/video.vue";
import Audio from "../../components/media/audio.vue";
import Article from "../../components/media/article.vue";
import {storeToRefs} from "pinia"
const store = mediaStore();
const {filterData,activeName} = storeToRefs(store);
// console.log(filterData);
// const activeName = ref('video'); // 当前的类别，默认为 “视频”
// 控制切换类别
const handleClick = (value) => {
  // console.log(value);
}

const currentFilter = ref([null,null]);
// 过滤选项
const filterOptions = [
  {
    label:"日期",
    show:computed(()=>true),
    value:[
      {
        label:'全部日期',
        value:null,
      },
      {
        label:'一周以内',
        value:'inWeek'
      },
      {
        label:'一月以内',
        value:'inMonth'
      },
      {
        label:'一年以内',
        value:'inYear'
      },
      {
        label:'超过一年',
        value:'outYear'
      }
    ]
  },
  {
    label:"时间",
    show:computed(()=>["image"].indexOf(activeName.value) === -1),
    value:[
      {
        label:'全部时长',
        value:null,
      },
      {
        label:'10分钟内',
        value:'10min'
      },
      {
        label:'10-30分钟',
        value:'10-30'
      },
      {
        label:'30-60分钟',
        value:'30-60'
      },
      {
        label:'一小时以上',
        value:'1hour'
      }
    ]
  }
]
</script>

<template>

      <div style="display: flex;flex-direction: column;">
        <!-- 搜索框 -->
        <el-row style="justify-content: center;">
          <el-col :span="12">
            <el-input placeholder="请输入查找内容" style="height:42px" >
              <template #prefix>
                <el-icon>
                  <Search/>
                </el-icon>
              </template>
              <template #append>
                <el-button>搜索</el-button>
              </template>
            </el-input>
          </el-col>
        </el-row>
        <!-- 类别 -->
        <el-tabs  v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="视频" name="video"></el-tab-pane>
          <el-tab-pane label="文章" name="article"></el-tab-pane>
          <el-tab-pane label="图片" name="image"></el-tab-pane>
          <el-tab-pane label="音频" name="audio"></el-tab-pane>
        </el-tabs>

        <!--筛选-->
        <el-row>
          <!--综合筛选-->
          <el-col  v-for="(items,index) in filterOptions" :key="index" >
            <el-space style="margin-bottom:5px">
              <el-button v-if="items.show.value" v-for="(v,i) in items.value" :key="i" :class="{active:v.value===currentFilter[index]}" @click="()=>currentFilter[index]=v.value">
                {{v.label}}
              </el-button>
            </el-space>
          </el-col>
        </el-row>
        <!--筛选-->

<!--          展示图片-->
      <Image v-if="activeName==='image'" />
<!--          展示音频-->
      <Audio v-else-if="activeName==='audio'"/>
<!--          展示视频-->
      <Video v-else-if="activeName==='video'"/>
<!--        展示文章-->
      <Article v-else></Article>


      </div>
</template>

<style scoped>
   #media{
    width: 100%;
    height: 100%;
   }
   #media .el-space{
    width: 100%;
    height: 100%;
   }
   #media .el-input{
    width: 70%;
   }
   .active{
     color:white;
     background-color:midnightblue;
     transition: all 1s ease;
   }

</style>